<template>
    <div class="mv-item" v-for="item in list" :key="item.mvId" @click="gotoDetail(item.mvId)">           
        <div class="mv-cover">
            <!-- 遮罩 -->
            <div class="mask"></div>
            <div class="btn">
                <div class="triangle"></div>
            </div>
            <img :src="getUrl(item.cover)">
        </div>
        <p class="name">{{item.name}}</p>
        <p class="author">{{item.author}}</p>
    </div>
</template>
<script setup lang="ts">
    import { useRouter } from "vue-router";
    import { getUrl } from '@/utils/format';
    const router = useRouter() 

    defineProps(["list"])
    // 跳转至详情页
    function gotoDetail(id:any){      
        router.push({name:'MV详情',params:{id}})
    }
</script>
<style lang="less" scoped>
.mv-list{
    display: flex;
    flex-wrap: wrap;
}
.mv-item,.mv-cover,.mv-cover>img,.mask{
    border-radius: 10px;
}
.mv-item{
    width:400px; 
    margin-right: 20px;
    /* mv名称 */
    .name{
        margin:8px 0;
    }
    /* 标题 */
    .author{
        font-family: "Helvetica",sans-serif;
        font-size: 13px;
        color: #556358;
    }
}
/* mv卡片 */
.mv-cover{    
    width: 100%;
    height:250px;
    overflow: hidden;
    position: relative;
    cursor:pointer; 
    /* 图片 */ 
    img{
        object-fit: cover;
        width:100%;
        height:100%;        
        outline:none !important;
        transition: all 0.3s linear;        
    }
    /* 遮罩 */
    .mask{
        width:100%;
        height:100%; 
        background:rgba(0, 0, 0);
        opacity:0;
        position:absolute;
        left:0;
        top:0;
        z-index: 10;
    }
    /* 按钮 */
    .btn{
        opacity: 0;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left:0;top: 0;right: 0;bottom: 0;
        margin: auto;
        z-index: 11;
        &:hover{
            background-color: rgb(180, 193, 219);
        }
        .triangle{
            width: 0;height: 0;
            border-style: solid;
            border-width: 16px 26px 16px 26px;
            border-color: transparent transparent transparent #000 ;
            position: absolute;
            left: 50%;top: 50%;
            transform: translate(-17%, -50%);
        }
    }
    &:hover{        
        .mask{
            opacity:0.2;            
        }
        .btn{
            opacity:1;            
        }
        img {
            transform:scale(1.2);
        }
    }    
}






</style>